<template>
    <div class="container-fluild footer_container">
        <!-- 回到顶部 -->
        <div class="toTop" @click="toTop">
            <el-icon size="20" color="#fff">
                <ArrowUpBold />
            </el-icon>
        </div>
        <div class="container">
            <div class="row footer_row">
                <div class="col-md-5 contact">
                    <h3>
                        <svg t="1649321039266" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="9728" width="22" height="22">
                            <path
                                d="M511.449009 213.858462a179.278769 179.278769 0 1 1 0 358.557538 179.278769 179.278769 0 0 1 0-358.557538z m393.294769 179.357538A393.294769 393.294769 0 1 0 182.036086 608.098462l294.203077 392.270769a39.384615 39.384615 0 0 0 70.498462 0l294.754461-392.270769c39.699692-61.912615 63.251692-135.483077 63.251692-214.882462z"
                                p-id="9729" fill="#ffffff"></path>
                        </svg>
                        <span>联系</span>
                    </h3>
                    <p>
                        上海市闵行区春东路508号IF如果创意产业园A栋7层<br />
                        电话：15800616566
                    </p>
                    <img style="width: 80px;margin-top: 10px;" src="./images/QRcode.png" alt="二维码" />
                </div>
                <div class="col-md-4 navigation">
                    <h3>
                        <svg t="1649322292493" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="17869" width="22" height="22">
                            <path
                                d="M1000.533333 0c-4.266667 0-8.533333 0-10.666666 2.133333L12.8 531.2c-21.333333 12.8-12.8 44.8 10.666667 44.8h401.066666c12.8 0 23.466667 10.666667 23.466667 23.466667v401.066666c0 14.933333 12.8 23.466667 23.466667 23.466667 8.533333 0 14.933333-4.266667 21.333333-12.8L1021.866667 34.133333c8.533333-17.066667-4.266667-34.133333-21.333334-34.133333z"
                                fill="#ffffff" p-id="17870"></path>
                        </svg>
                        <span>导航</span>

                    </h3>
                    <ul>
                        <li>
                            <router-link to="/home">首 页 (Home)</router-link>
                        </li>
                        <li>
                            <router-link to="/product">产品中心 (Product)</router-link>
                        </li>
                        <li>
                            <router-link to="/news">新闻动态 (News)</router-link>
                        </li>
                        <li>
                            <router-link to="/about">关于昨非 (About)</router-link>
                        </li>
                        <li>
                            <router-link to="/contact">联系我们 (Contact)</router-link>
                        </li>
                    </ul>

                </div>
                <div class="col-md-3">
                    <h3>
                        <svg t="1649322884249" class="icon" viewBox="0 0 1025 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="22869" width="22" height="22">
                            <path
                                d="M1024.549 360.609c0-170.492-133.815-309.265-298.055-309.265-81.129 0-157.91 34.998-213.344 94.701-55.509-59.702-132.367-94.701-213.344-94.701C135.49 51.344 1.751 190.041 1.751 360.609c0 5.719 0.534 10.827 0.991 15.021-0.076 1.373-0.152 2.745-0.152 4.194 0 30.193 7.319 63.361 21.73 98.59 0.458 1.295 0.915 2.516 1.449 3.657 90.812 217.844 440.412 468.474 455.279 479.985 9.227 7.092 20.205 10.6 31.263 10.6 11.209 0 22.266-3.659 31.566-10.903 12.733-9.911 310.941-224.551 429.279-427.603 4.498-6.861 7.854-13.494 10.828-19.215 0.914-1.829 1.753-3.658 2.744-5.413l0.382-0.839c0.382-0.686 0.839-1.449 1.296-2.059 7.091-13.802 12.732-26.611 17.232-39.116 12.274-32.177 18.3-60.847 18.3-87.61 0-2.058-0.077-3.888-0.229-5.414C1024.093 370.979 1024.549 366.251 1024.549 360.609z"
                                p-id="22870" fill="#ffffff"></path>
                        </svg>
                        <span>社交</span>
                    </h3>
                    <div class="social">
                        <a>
                            <svg @mouseenter="showQR('douyin')" @mouseleave="hiddenQR" t="1661502340966" class="icon"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1899"
                                width="22" height="32">
                                <path
                                    d="M937.4 423.9c-84 0-165.7-27.3-232.9-77.8v352.3c0 179.9-138.6 325.6-309.6 325.6S85.3 878.3 85.3 698.4c0-179.9 138.6-325.6 309.6-325.6 17.1 0 33.7 1.5 49.9 4.3v186.6c-15.5-6.1-32-9.2-48.6-9.2-76.3 0-138.2 65-138.2 145.3 0 80.2 61.9 145.3 138.2 145.3 76.2 0 138.1-65.1 138.1-145.3V0H707c0 134.5 103.7 243.5 231.6 243.5v180.3l-1.2 0.1"
                                    p-id="1900" fill="#ffffff"></path>
                            </svg>
                            <transition name="douyin" appear class="animate__animated" enter-active-class="animate__fadeIn"
                                leave-active-class="animate__zoomOut">
                                <div class="douyin" v-show="isShowDouYin">
                                    <img src="./images/douyin.png" alt="抖音二维码">
                                </div>
                            </transition>
                        </a>

                        <a>
                            <svg @mouseenter="showQR('weibo')" @mouseleave="hiddenQR" t="1649323825138" class="icon"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27275"
                                width="30" height="30">
                                <path
                                    d="M726.64 470.78c-34.78-6.72-17.845-25.088-17.845-25.088s34.023-55.406-6.805-95.73c-50.5-49.878-173.429 6.276-173.429 6.276-46.877 14.333-34.478-6.572-27.824-42.116 0-41.965-14.518-112.899-139.563-71.084-124.894 42.263-232.1 189.958-232.1 189.958-74.54 98.118-64.713 173.983-64.713 173.983 18.596 167.562 198.984 213.557 339.303 224.462C551.24 842.79 750.53 781.259 810.857 654.619c60.486-126.791-49.29-176.97-84.217-183.838zM414.55 784.249c-146.518 6.718-265.061-65.71-265.061-162.184 0-96.624 118.543-173.984 265.061-180.706 146.669-6.718 265.364 53.018 265.364 149.342 0 96.327-118.695 186.976-265.364 193.548zM385.367 504.83c-147.425 17.023-130.338 153.224-130.338 153.224s-1.51 43.16 39.467 65.114c86.183 46.145 175.093 18.216 219.849-38.98 44.907-57.047 18.6-196.235-128.978-179.358zM348.17 696.138c-27.516 3.135-49.743-12.547-49.743-35.248 0-22.55 19.654-46.296 47.173-49.13 31.604-2.99 52.167 14.934 52.167 37.782 0.151 22.55-22.228 43.46-49.597 46.596z m86.946-73.03c-9.377 6.87-20.866 5.975-25.707-2.388-5.141-8.067-3.175-20.91 6.2-27.628 10.886-8.067 22.228-5.674 27.217 2.388 4.841 8.067 1.36 20.458-7.71 27.628zM798.459 411.79c11.946 0 21.927-8.66 23.74-20.008 0.153-0.897 0.3-1.645 0.3-2.542 17.997-159.646-132.605-132.165-132.605-132.165-13.306 0-24.04 10.6-24.04 24.042 0 13.144 10.734 23.748 24.04 23.748 108.112-23.598 84.375 83.18 84.375 83.18-0.152 13.144 10.733 23.745 24.19 23.745z m-17.54-278.671c-52.013-12.096-105.693-1.64-120.662 1.195-1.21 0.15-2.266 1.198-3.323 1.344-0.457 0.151-0.908 0.597-0.908 0.597-14.818 4.185-25.555 17.624-25.555 33.603 0 18.968 15.573 34.646 35.078 34.646 0 0 18.9-2.538 31.756-7.466 12.699-5.076 120.657-3.732 174.185 84.976 29.186 64.813 12.856 108.123 10.737 115.141 0 0-6.954 16.877-6.954 33.452 0 19.115 15.574 31.215 35.078 31.215 16.18 0 29.786-2.243 33.718-29.273h0.152c57.761-189.215-70.16-278.072-163.302-299.43z m0 0"
                                    p-id="27276" fill="#ffffff"></path>
                            </svg>
                            <transition name="weibo" appear class="animate__animated" enter-active-class="animate__fadeIn"
                                leave-active-class="animate__zoomOut">
                                <div class="weibo" v-show="isShowWeibo">
                                    <img src="./images/weibo.png" alt="微博二维码">
                                </div>
                            </transition>
                        </a>

                        <a>
                            <svg @mouseenter="showQR('bzhan')" @mouseleave="hiddenQR" t="1661503462347" class="icon"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3263"
                                width="28" height="30">
                                <path
                                    d="M306.005333 117.632L444.330667 256h135.296l138.368-138.325333a42.666667 42.666667 0 0 1 60.373333 60.373333L700.330667 256H789.333333A149.333333 149.333333 0 0 1 938.666667 405.333333v341.333334a149.333333 149.333333 0 0 1-149.333334 149.333333h-554.666666A149.333333 149.333333 0 0 1 85.333333 746.666667v-341.333334A149.333333 149.333333 0 0 1 234.666667 256h88.96L245.632 177.962667a42.666667 42.666667 0 0 1 60.373333-60.373334zM789.333333 341.333333h-554.666666a64 64 0 0 0-63.701334 57.856L170.666667 405.333333v341.333334a64 64 0 0 0 57.856 63.701333L234.666667 810.666667h554.666666a64 64 0 0 0 63.701334-57.856L853.333333 746.666667v-341.333334A64 64 0 0 0 789.333333 341.333333zM341.333333 469.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v85.333333a42.666667 42.666667 0 0 1-85.333333 0v-85.333333a42.666667 42.666667 0 0 1 42.666666-42.666667z m341.333334 0a42.666667 42.666667 0 0 1 42.666666 42.666667v85.333333a42.666667 42.666667 0 0 1-85.333333 0v-85.333333a42.666667 42.666667 0 0 1 42.666667-42.666667z"
                                    p-id="3264" fill="#ffffff"></path>
                            </svg>
                            <transition name="bzhan" appear class="animate__animated" enter-active-class="animate__fadeIn"
                                leave-active-class="animate__zoomOut">
                                <div class="bzhan" v-show="isShowBzhan">
                                    <img src="./images/bzhan.png" alt="B站二维码">
                                </div>
                            </transition>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluild container_bootom text-center">
            <!-- <img src="./images/police.png" alt="备案号" /> -->
            <span>© 上海昨非实验室设备有限公司 </span>
            <a href="https://beian.miit.gov.cn/#/Integrated/recordQuery" target="_blank">
                沪ICP备20016804号-4
            </a>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
let isShowDouYin = ref(false) //是否展示抖音二维码
let isShowWeibo = ref(false) //是否展示微博二维码
let isShowBzhan = ref(false) //是否展示B站二维码
//鼠标移入展示微信二维码
const showQR = (id: any) => {
    if (id == "douyin") {
        isShowDouYin.value = true
    } else if (id == "weibo") {
        isShowWeibo.value = true
    } else {
        isShowBzhan.value = true
    }

}
//鼠标离开隐藏微信二维码
const hiddenQR = () => {
    isShowDouYin.value = false
    isShowWeibo.value = false
    isShowBzhan.value = false
}
//回到顶部
const toTop = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
}
</script>

<style scoped lang="scss">
.footer_container {
    position: relative;
    background-color: #4F68AC;

    /* 回到顶部按钮 */
    .toTop {
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -20px;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: #4F68AC;
        border: 3px solid #fff;
        border-radius: 50%;
        cursor: pointer;
        transition-duration: 0.3s;

        &:hover {
            background-color: #2e4174;
        }

        &:active {
            transform: scale(0.9);
        }
    }

    .footer_row {
        font-family: "Source Han Sans CN";
        font-size: 16px;
        color: #ffffff;
        font-weight: 300;
        padding: 20px 30px;

        h3 {
            display: flex;
            align-items: center;
            font-size: 24px;
            margin-bottom: 20px;
            margin-top: 60px;

            span {
                margin-left: 10px;
                font-size: 24px;
                font-family: "Source Han Sans CN";
                font-weight: 300;
            }
        }

        p {
            line-height: 36px;
        }

        .navigation {
            a {
                text-decoration: none;
                color: #fff;
                transition: all 0.2s linear;
                line-height: 40px;

                &:hover {
                    color: rgba(255, 255, 255, 0.30);
                }
            }
        }

        .social {
            a {
                margin-right: 20px;
                cursor: pointer;

                .douyin {
                    position: absolute;
                    left: -42px;
                    z-index: 9999;
                    width: 140px;
                    height: 150px;
                }

                .weibo {
                    position: absolute;
                    left: 2px;
                    z-index: 9999;
                    width: 140px;
                    height: 150px;
                }

                .bzhan {
                    position: absolute;
                    left: 53px;
                    z-index: 9999;
                    width: 140px;
                    height: 150px;
                }

                .douyin img,
                .weibo img,
                .bzhan img {
                    height: 100%;
                    width: 100%;
                }
            }
        }
    }

    .container_bootom {
        background-color: #4F68AC;
        padding: 16px 0;
        margin-top: 30px;
        border-top: 1px solid rgba(255, 255, 255, 0.071);

        a,
        span {
            font-family: "Source Han Sans CN";
            font-size: 14px;
            font-weight: 300;
            color: #fff;
            display: inline-block;
            margin: 3px 0 0 8px;
            text-decoration: none;
            transition: all 0.2s linear;
        }

        a:hover {
            color: rgba(255, 255, 255, 0.30);
        }
    }
}

/* 设置响应式 */
/* 移动端 */
@media (max-width: 768px) {
    .footer_container .footer_row .social a {
        .douyin {
            position: absolute;
            left: -20px;
            z-index: 9999;
            width: 90px;
            height: 100px;
        }

        .weibo {
            position: absolute;
            left: 26px;
            z-index: 9999;
            width: 90px;
            height: 100px;
        }

        .bzhan {
            position: absolute;
            left: 77px;
            z-index: 9999;
            width: 90px;
            height: 100px;
        }
    }
}
</style>